<template>
  <div id="app" :style="{ color: colorConfig.textColor }">
    <div v-if="callVisible" class="layout-root">
      <div class="layout box" :style="{backgroundColor:colorConfig.contentColor}">
        <div v-for="(item,index) in getFileds()" :key="index" :class="getClass(item.selectValue)">
          <div v-for="(subItem,subIndex) in item.checkboxValue" :key="subIndex" :class="getNameClass(index)">
            {{subItem}}</div>
        </div>
      </div>
    </div>
    <div v-if="netVisible" class="net-error" :style="{backgroundColor:colorConfig.contentColor}">
      网络异常,请联系管理员
    </div>
    <div class="shuiyin" :style="{ color: colorConfig.textColor }">
      <div class="shuiyin-item">设备编号:{{ deviceId }}</div>
    </div>
    <router-view />
  </div>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      callVisible: false,
      colorConfig: { backgroundColor: "#1D82E8", contentColor: "#1E55A8", textColor: "#ffffff" },
      callUsers: [],
      isCall: false,
      currentUser: { roomName: "", patientName: "" },
      deviceId: "",
      callInfo: ["科室", "诊室", "姓名"],//["诊室", "姓名"],//显示信息
      netVisible: false,
      showLength: 0,
      voiceStr: "请{姓名}到{科室}{诊室}就诊",
      showStr: "[{\"checkboxValue\":[],\"checkbox\":[{\"attrId\":1,\"attrName\":\"科室\"}],\"selectValue\":\"2\"},{\"checkboxValue\":[\"诊室\"],\"checkbox\":[{\"attrId\":2,\"attrName\":\"诊室\"}],\"selectValue\":\"2\"},{\"checkboxValue\":[],\"checkbox\":[{\"attrId\":3,\"attrName\":\"医生\"}],\"selectValue\":\"2\"},{\"checkboxValue\":[\"姓名\"],\"checkbox\":[{\"attrId\":4,\"attrName\":\"姓名\"},{\"attrId\":5,\"attrName\":\"工位\"}],\"selectValue\":\"2\"}]",
      fileds:
        [
          // { checkboxValue: ["科室"], checkbox: [{ attrId: 1, attrName: "科室" }], selectValue: "3" },
          // { checkboxValue: ["诊室"], checkbox: [{ attrId: 2, attrName: "诊室" }], selectValue: "2" },
          // { checkboxValue: ["医生"], checkbox: [{ attrId: 3, attrName: "医生" }], selectValue: "3" },
          // { checkboxValue: ["张三丰", "四椅位"], checkbox: [{ attrId: 4, attrName: "姓名(四椅位)" }, { attrId: 5, attrName: "工位" }], selectValue: "1" },
        ],
      getFileds: () => {
        let arr = this.fileds.filter(value => {
          return value.checkboxValue.length > 0
        })
        this.showLength = arr.length;
        return arr;
      },
      getClass: (type) => {
        if (type == "1") {
          return "sub-layout-top";
        }
        if (type == "2") {
          return "sub-layout-center";
        }
        if (type == "3") {
          return "sub-layout-bottom"
        }
        return "sub-layout-center";
      },
      getNameClass: (ix) => {
        console.error(ix);
        if (ix == this.showLength - 1) {
          return "font-size-big" + (this.showLength < 3 ? "" : "1");
        }
        return "font-size-small" + (this.showLength < 3 ? "" : "1");
      }
    };
  },
  methods: {

  },
  mounted() {
    window.addEventListener("SOCKET_MESSAGE", (res) => {
      let value = res.detail;
      switch (value.protocol) {
        case 1000://登录成功
          console.error("登录成功", value)
          this.loginSuccess(value);
          break;
        case 2001://号号信息  state=2 的
          var calls = value.data;
          console.error("TAG 叫号:", calls);
          // DeptName    string`json:"deptName" dc:"科室信息"`
          // RoomName    string`json:"roomName" dc:"诊室信息"`
          // PatientName string`json:"patientName" dc:"姓名"`
          // DoctorName  string`json:"doctorName" dc:"姓名"`
          //LocationId   string`json:"locationId" dc:"工位"`
          // Seq         string`json:"seq"`
          this.callUsers.push(...calls);
          if (this.isCall) {
            return;
          }
          this.callUser();
          break;
      }
    });
    window.addEventListener("OPEN_SOCKET", (res) => {
      this.dialogVisible = false;
      this.netVisible = false;
      this.websocketonopen();
    });
    window.addEventListener("REFRESH", (res) => {
      let d = res.detail
      let device = d;
      if (device.deviceColor) {
        this.colorConfig = device.deviceColor;
        this.GLOBAL.colorConfig = device.deviceColor
      }
      let str = device.deviceShowConfig;
      if (str) {
        this.showStr = str;
      }
      if (device.deviceVoiceConfig) {
        this.voiceStr = device.deviceVoiceConfig;
      }
      this.deviceId = device.deviceId;
    });
    window.addEventListener("SOCKET_CLOSE", () => {
      if (this.netVisible) return;
      this.isCall = false;
      this.callVisible = false;
      this.netVisible = true;
      this.callUsers = [];
    });
    this.GLOBAL.initWebSocket();
  },
  methods: {
    loginSuccess(value) {
      let device = value.data;
      this.GLOBAL.device = device;
      if (device.deviceColor) {
        this.colorConfig = device.deviceColor;
        this.GLOBAL.colorConfig = device.deviceColor
      }
      let str = device.deviceShowConfig;
      if (str) {
        this.showStr = str;
      }
      if (device.deviceVoiceConfig) {
        this.voiceStr = device.deviceVoiceConfig;
      }
      this.deviceId = device.deviceId;
      window.dispatchEvent(new CustomEvent('LOGIN_SUCCESS'));
    },
    getCallStr(u, str) {
      if (!str) return str;
      str = str.replace(/科室/g, u.deptName)
        .replace(/诊室/g, u.roomName)
        .replace(/医生/g, u.doctorName)
        .replace(/姓名/g, u.patientName)
        .replace(/工位/g, u.locationId ? u.locationId : "")
      return str;
    },
    callUser() {//呼叫用户
      this.isCall = true;
      if (this.callUsers.length > 0) {
        let u = this.callUsers.shift();
        this.currentUser = u;

        let arr = JSON.parse(this.showStr);
        for (let i = 0; i < arr.length; i++) {
          let fArr = arr[i].checkboxValue;
          fArr.sort((a, b) => {
            return b - a;
          });
          for (let j = 0; j < fArr.length; j++) {
            fArr[j] = this.getCallStr(u, fArr[j]);
          }
        }
        this.fileds = arr;
        console.error("叫号显示", this.fileds);
        this.callVisible = true;
        this.netVisible = false;

        let str = this.voiceStr;
        str = str.replace(/{科室}/g, u.deptName)
          .replace(/{诊室}/g, u.roomName)
          .replace(/{医生}/g, u.doctorName)
          .replace(/{姓名}/g, u.patientName)
          .replace(/{工位}/g, u.LocationId)
        let speakStr = str;// `请${u.patientName}到${u.roomName}就诊`;
        this.callAndroid(speakStr);
        setTimeout(() => {
          this.callUser();
        }, 6000);
      } else {
        this.isCall = false;
        this.callVisible = false;
        this.netVisible = false;
      }
    },
    callAndroid(msg) {
      try {
        if (window['AndroidBrowser']) {
          AndroidBrowser.jsSpeak(msg);
        } else {
          var utterThis = new window.SpeechSynthesisUtterance(msg);
          window.speechSynthesis.speak(utterThis);
        }
      } catch (ex) {
        console.error(ex);
      }
    },
    websocketonopen() {//连接成功,开始登录
      let id = this.$route.query.id
      let msg = {
        Protocol: 1000,
        Data: id ? id : "D0001"
      }
      console.log("WebSocket连接成功!!!");
      this.GLOBAL.websocketsend(JSON.stringify(msg));
    },
  }
}
</script>

<style>
html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /* background-color: #1D82E8; */
  margin: 0px auto;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-shadow: 5px 5px 5px #000000;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

table {
  width: 100%;
  border: 0px solid black;
  border-collapse: collapse;
}

.net-error {
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  position: absolute;
  z-index: 997;
  font-size: 15vw;
  font-weight: bold;
}

.layout-root {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 997;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

.layout {
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: column;
  /* height: 200px; */
  background-color: cornflowerblue;
  /* padding-top: 10px;
  padding-bottom: 10px; */
  font-size: 2vw;
  color: #FFFFFF;
  font-weight: bold;
  border-radius: 6px;
}

.layout>div {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}

.sub-layout-top {
  align-items: flex-start
}

.sub-layout-center {
  align-items: center;
}

.sub-layout-bottom {
  align-items: flex-end
}

.font-size-big {
  font-size: 13vw;
}

.font-size-small {
  font-size: 9vw;
}

.font-size-big1 {
  font-size: 8vw;
}

.font-size-small1 {
  font-size: 6vw;
}


.box {
  -webkit-box-shadow: 3px 3px 3px black;
  -moz-box-shadow: 3px 3px 3px black;
  box-shadow: 3px 3px 3px black;
}



.shuiyin {
  position: fixed;
  height: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  opacity: 0.8;
  filter: Alpha(opacity=80);
  vertical-align: bottom;
  /* IE8 以及更早的浏览器 */
}

.shuiyin-item {
  pointer-events: none;
  display: inline-block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  text-align: right;
}
</style>
